import React from 'react'
import { Table, Input, Popconfirm ,Select,InputNumber,Form} from 'antd';
import { observer, inject } from 'mobx-react'
import _ from 'lodash'
import util from '../../../common/util'
import '../../../../style/less/exhibition.less'

const Option = Select.Option;
const FormItem = Form.Item

@inject("store")
@observer
class StandTable extends React.Component {
    constructor() {
        super();
    }
    render() {
        let {form,store,data,key1}=this.props;
        let {actions}=store
        const areaColumns=(text, record, key2) =>{
            return (
                <FormItem style={{marginBottom:'0',marginTop:'0'}}>
                    {form.getFieldDecorator(`halls[${key1}].areas[${key2}].area`, {
                        initialValue:text,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, whitespace:true,message: '不能为空!' },
                            {max:40,message:'展区名不得超过40字'}],
                    })(
                        <Input onBlur={actions.areaChange.bind(this,key1,key2)}/>
                    )}
                </FormItem>
            );
        }
        const wordColumns=(text, record, key2) =>{
            return (
                <FormItem style={{marginBottom:'0',marginTop:'0'}}>
                    {form.getFieldDecorator(`halls[${key1}].areas[${key2}].word`, {
                        initialValue:text,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, whitespace:true,message: '不能为空!' },
                            {max:5,message:'不得超过5位'},
                            {pattern:'^[A-Z]+$',message:'必须为A-Z'}],
                    })(
                        <Input />
                    )}
                </FormItem>
            );
        }
        const startColumns=(text, record, key2) =>{
            return (
                <FormItem style={{marginBottom:'0',marginTop:'0'}}>
                    {form.getFieldDecorator(`halls[${key1}].areas[${key2}].start`, {
                        initialValue:text,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, message: '不能为空!' }],
                    })(
                        <InputNumber min={1} max={999} />
                    )}
                </FormItem>
            );
        }
        const endColumns=(text, record, key2) =>{
            return (
                <FormItem style={{marginBottom:'0',marginTop:'0'}}>
                    {form.getFieldDecorator(`halls[${key1}].areas[${key2}].end`, {
                        initialValue:text,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, message: '不能为空!' }],
                    })(
                        <InputNumber min={parseInt(form.getFieldValue(`halls[${key1}].areas[${key2}].start`))} max={999} />
                    )}
                </FormItem>
            );
        }
        const columns = [{
            title: '展区名',
            dataIndex: 'areaName',
            key:'areaName',
            width:230,
            render: (text, record,index) => areaColumns(text, record,data[index].key),
        }, {
            title: '区域编号',
            dataIndex: 'word',
            width:130,
            render: (text, record,index) => wordColumns(text, record,data[index].key),
        }, {
            title: '开始编号',
            dataIndex: 'start',
            render: (text, record,index) => startColumns(text, record, data[index].key),
        }, {
            title: '结束编号',
            dataIndex: 'end',
            render: (text, record,index) => endColumns(text, record,data[index].key),
        }, {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record,index) => {
                return (
                    data.length>1&& <FormItem style={{marginBottom:'0',marginTop:'0'}}><a onClick={() => actions.delStand(data,index)}>删除</a></FormItem>
                );
            },
        }];

        return <Table bordered dataSource={data.slice()} columns={columns} pagination={false}/>;
    }
}

export default StandTable
